<template>

	<view class="content">
		<NewCards @noticeLoad='getNoticeData'></NewCards>


		<view class="topbox">
			<StatusBar></StatusBar>
			<view class="locationBox itemBox2 " :style="[{height:StatusBar.height+'px'}]">

				<text class="addr-name clickEffict " @click="back"><text class="cuIcon-back "></text> {{title || '--'}}
				</text>
				<text class="rightText" @click="clearNotice" :style="[{right:StatusBar.width+'px'}]">清除未读</text>
			</view>
		</view>
		<view class="search-boxes" :style="[{marginTop:StatusBar.top+StatusBar.height+5+'px'}]">

		</view>
		<view class="back-box middle cuIcon-top-box" v-if="isShow" @click="showTop">
			<text class="cuIcon-top"></text>
		</view>


		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="notice-list">
				<view class="notice-item" v-for="(list,index) in msgList" :key="index" @click="jumpTo(index)"
					:class="index!=0?'notice-item1':''">
					<view class="notice-icon">
						<image :src="list.icon" mode="aspectFill" lazy-load="true"></image>

					</view>
					<view class="notice-bodty notice-bodt">
						<view class="noticeText">
							<text class="notice-title">{{list.title}}</text>
							<text class="notice-time">{{list.created_at}}</text>
						</view>
						<view class=" noticeText ">
							<view class="noticeText1 notice-desc">{{list.desc}}</view>
							<view v-if="list.is_read==0"> <text class="cuIcon-title text-red"></text></view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>
<script>
	let isLogin = false;
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	export default {
		components: {
			MescrollBody
		},
		data() {
			return {
				title: '消息列表',
				StatusBar: this.Custom,
				W: this.WH,
				topW: this.WW - this.Custom.width,
				domain: this.apiHost,
				swiperHeight: '',
				msgList: [],
				mescroll: null,
				downOption: {
					use: false,
					native: false,
					auto: false,
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 15
					},
					load: false,
					onScroll: true,
					noMoreSize: 5,
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '到底啦'
				},
				isShow: false,

			}
		},
		mounted() {
			this.getInfo().then((e) => {

				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50;

			})

		},
		onShareAppMessage(res) {
			return {
				title: "一舟校园",
				path: '/pages/basic/basic'
			}
		},
		onReachBottom() {
			this.upCallback(this.mescroll);
		},
		onPageScroll(e) {

			(e.scrollTop > 550 && !this.isShow) ? (() => {
				this.isShow = true;
			})() : (e.scrollTop <= 550 && this.isShow) ? (() => {
				this.isShow = false;

			})() : "";
		},
		methods: {
			back() {
              uni.navigateBack({
              	delta:1
              })
			},
			/**
			 * 清除未读消息
			 */
			clearNotice() {

				this.apiRequest('/buyer/NotifyClean ', {
					area_id: uni.getStorageSync('area_id'),
				}, 0, 'DELETE').then(res => {
					if (res.code == 200) {
						uni.setStorageSync('noticeNum', 0);
						uni.removeTabBarBadge({
							index: 3,
							success: () => {

							}
						})
						this.mescroll.resetUpScroll();
					}

				})
			},
			/**
			 * 跳转
			 * @param {Object} index
			 */
			jumpTo(index) {

				uni.navigateTo({
					url: this.msgList[index].page
				})
				this.apiRequest('/buyer/NotifyRead', {
					notify_id: this.msgList[index].notify_id,
				}, 0, 'POST').then(res => {
					if (res.code == 200) {

						let num = parseInt(uni.getStorageSync('noticeNum'));
						num--;
						uni.setStorageSync('noticeNum', num);
						if (num > 0) {
							uni.setTabBarBadge({
								index: 3,
								text: num + "",
								success: () => {

								}
							})
						} else {
							uni.removeTabBarBadge({
								index: 3,
								success: () => {

								}
							})
						}

						this.mescroll.resetUpScroll();
					}
				})
			},
			showTop() {

				this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let authorization = uni.getStorageSync('authorization');
				if (!authorization) {
					this.msgList = [];
					this.mescroll.endSuccess();
					this.mescroll.endByPage(0, 0);
					return false;
				}
				this.apiRequest('/buyer/NotifyList', {
					area_id: uni.getStorageSync('area_id'),
					page: page.num,
					limit: page.size,
				}, 0, 'GET').then(res => {
					uni.stopPullDownRefresh();
					if (res.code != 200) {
						this.mescroll.endSuccess()
					}
					if (page.num == 1) {
						this.msgList = [];
					}
					if (res.code == 200) {
						this.mescroll.num++;
						this.msgList = this.msgList.concat(res.data.data) //追加新数据
						this.mescroll.endBySize(this.msgList.length, res.data.total);
					}
				}).catch(() => {
					uni.stopPullDownRefresh();
					this.mescroll.endErr();
				})
			},


		}



	}
</script>

<style scoped>
	.itemBox2 {
		display: flex;
		align-items: center;
	}

	.locationBox {
		width: 94%;
		margin: auto;
		position: relative;

	}

	.topbox {
		position: fixed;
		z-index: 99;
		top: 0;
		width: 100%;
		background-color: #F7F7F7;
	}

	.notice-list {
		width: 94%;
		margin: auto;

	}

	.cuIcon-top-box {
		position: fixed;
		bottom: 5vh;
		float: right;
		right: 3vw;
		color: white;
		font-size: 40rpx;
		z-index: 9;
		width: 70rpx;
		height: 70rpx;
	}

	.back-box {
		border-radius: 50%;
		color: white;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.rightText {
		position: absolute;
		float: right;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.addr-name {
		font-family: PingFang SC;
		max-width: 80%;
		font-size: 36upx;
		font-weight: 800;
		display: -webkit-box;
		text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		overflow: hidden;
		-webkit-box-orient: vertical;

	}


	.notice-item {
		width: 100%;
		height: 140upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;

	}

	.notice-item1 {
		margin-top: 20upx;
	}

	.notice-icon {
		width: 100upx;
		height: 100upx;
		position: relative;
		border-radius: 20upx;
		margin: 0 20upx;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		background-color: #C2C2C2;

	}

	.notice-icon image {
		width: 100upx;
		height: 100upx;
		border-radius: 20upx;
	}

	.notice-bodty {
		height: 100upx;
		display: flex;
		position: relative;
		flex-direction: column;

	}

	.noticeText {
		width: 100%;
		height: 50%;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.noticeText1 {
		width: 96%;
		height: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		display: block;
		align-items: center;
		white-space: nowrap;

	}

	.notice-title {
		max-width: 50%;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;



	}

	.notice-desc {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.notice-time {
		max-width: 45%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		position: absolute;
		float: right;
		right: 0upx;


	}
</style>

<style lang="scss">
	$width:750*0.94-100-60upx;

	.notice-bodt {
		width: $width;
	}
</style>
